<!DOCTYPE html>
<!-- saved from url=(0042) -->
<html lang="en"
	class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Notebook | Web Application</title>
<meta name="description"
	content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./chart_files/font.css" type="text/css">
<link rel="stylesheet" href="./chart_files/app.v1.css" type="text/css">
<!--[if lt IE 9]> <script src="js/ie/html5shiv.js"></script> <script src="js/ie/respond.min.js"></script> <script src="js/ie/excanvas.js"></script> <![endif]-->
<style type="text/css">
.jqstooltip {
	position: absolute;
	left: 0px;
	top: 0px;
	visibility: hidden;
	background: rgb(0, 0, 0) transparent;
	background-color: rgba(0, 0, 0, 0.6);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,
		endColorstr=#99000000);
	-ms-filter:
		"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
	color: white;
	font: 10px arial, san serif;
	text-align: left;
	white-space: nowrap;
	padding: 5px;
	border: 1px solid white;
	z-index: 10000;
}

.jqsfield {
	color: white;
	font: 10px arial, san serif;
	text-align: left;
}
</style>
</head>
<body class="" style="">
	<section class="vbox">
		<header class="bg-dark dk header navbar navbar-fixed-top-xs">
			<div class="navbar-header aside-md">
				<a class="btn btn-link visible-xs"
					data-toggle="class:nav-off-screen,open" data-target="#nav,html">
					<i class="fa fa-bars"></i>
				</a> <a href="#" class="navbar-brand" data-toggle="fullscreen"><img
					src="./chart_files/logo.png" class="m-r-sm">Notebook</a> <a
					class="btn btn-link visible-xs" data-toggle="dropdown"
					data-target=".nav-user"> <i class="fa fa-cog"></i>
				</a>
			</div>
			<ul class="nav navbar-nav hidden-xs">
				<li class="dropdown"><a href="#"
					class="dropdown-toggle dker" data-toggle="dropdown"> <i
						class="fa fa-building-o"></i> <span class="font-bold">Activity</span>
				</a>
					<section
						class="dropdown-menu aside-xl on animated fadeInLeft no-borders lt">
						<div class="wrapper lter m-t-n-xs">
							<a href="#" class="thumb pull-left m-r"> <img
								src="./chart_files/avatar.jpg" class="img-circle">
							</a>
							<div class="clear">
								<a href="#"><span class="text-white font-bold">@Mike
										Mcalidek</span></a> <small class="block">Art Director</small> <a
									href="#" class="btn btn-xs btn-success m-t-xs">Upgrade</a>
							</div>
						</div>
						<div class="row m-l-none m-r-none m-b-n-xs text-center">
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">245</span> <small
										class="text-muted">Followers</small>
								</div>
							</div>
							<div class="col-xs-4 dk">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">55</span> <small
										class="text-muted">Likes</small>
								</div>
							</div>
							<div class="col-xs-4">
								<div class="padder-v">
									<span class="m-b-xs h4 block text-white">2,035</span> <small
										class="text-muted">Photos</small>
								</div>
							</div>
						</div>
					</section></li>
				<li>
					<div class="m-t m-l">
						<a href="price.html"
							class="dropdown-toggle btn btn-xs btn-primary" title="Upgrade"><i
							class="fa fa-long-arrow-up"></i></a>
					</div>
				</li>
			</ul>
			<ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
				<li class="hidden-xs"><a href="#"
					class="dropdown-toggle dk" data-toggle="dropdown"> <i
						class="fa fa-bell"></i> <span
						class="badge badge-sm up bg-danger m-l-n-sm count"
						style="display: inline-block;">3</span>
				</a>
					<section class="dropdown-menu aside-xl">
						<section class="panel bg-white">
							<header class="panel-heading b-light bg-light">
								<strong>You have <span class="count"
									style="display: inline;">3</span> notifications
								</strong>
							</header>
							<div class="list-group list-group-alt animated fadeInRight">
								<a href="#" class="media list-group-item"
									style="display: block;"><span
									class="pull-left thumb-sm text-center"><i
										class="fa fa-envelope-o fa-2x text-success"></i></span><span
									class="media-body block m-b-none">Sophi sent you a email<br>
									<small class="text-muted">1 minutes ago</small></span></a> <a
									href="#" class="media list-group-item"> <span
									class="pull-left thumb-sm"> <img
										src="./chart_files/avatar.jpg" alt="John said"
										class="img-circle">
								</span> <span class="media-body block m-b-none"> Use awesome
										animate.css<br> <small class="text-muted">10
											minutes ago</small>
								</span>
								</a> <a href="#" class="media list-group-item"> <span
									class="media-body block m-b-none"> 1.0 initial released<br>
										<small class="text-muted">1 hour ago</small>
								</span>
								</a>
							</div>
							<footer class="panel-footer text-sm">
								<a href="#" class="pull-right"><i
									class="fa fa-cog"></i></a> <a href="#notes"
									data-toggle="class:show animated fadeInRight">See all the
									notifications</a>
							</footer>
						</section>
					</section></li>
				<li class="dropdown hidden-xs"><a href="#"
					class="dropdown-toggle dker" data-toggle="dropdown"><i
						class="fa fa-fw fa-search"></i></a>
					<section class="dropdown-menu aside-xl animated fadeInUp">
						<section class="panel bg-white">
							<form role="search">
								<div class="form-group wrapper m-b-none">
									<div class="input-group">
										<input type="text" class="form-control" placeholder="Search">
										<span class="input-group-btn">
											<button type="submit" class="btn btn-info btn-icon">
												<i class="fa fa-search"></i>
											</button>
										</span>
									</div>
								</div>
							</form>
						</section>
					</section></li>
				<li class="dropdown"><a href="#"
					class="dropdown-toggle" data-toggle="dropdown"> <span
						class="thumb-sm avatar pull-left"> <img
							src="./chart_files/avatar.jpg">
					</span> John.Smith <b class="caret"></b>
				</a>
					<ul class="dropdown-menu animated fadeInRight">
						<span class="arrow top"></span>
						<li><a href="#">Settings</a></li>
						<li><a href="profile.html">Profile</a></li>
						<li><a href="#"> <span
								class="badge bg-danger pull-right">3</span> Notifications
						</a></li>
						<li><a href="docs.html">Help</a></li>
						<li class="divider"></li>
						<li><a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
						</li>
					</ul></li>
			</ul>
		</header>
		<section>
			<section class="hbox stretch">
				<!-- .aside -->
				<aside class="bg-light lter b-r aside-md hidden-print hidden-xs"
					id="nav">
					<section class="vbox">
						<header class="header bg-primary lter text-center clearfix">
							<div class="btn-group">
								<button type="button" class="btn btn-sm btn-dark btn-icon"
									title="New project">
									<i class="fa fa-plus"></i>
								</button>
								<div class="btn-group hidden-nav-xs">
									<button type="button"
										class="btn btn-sm btn-primary dropdown-toggle"
										data-toggle="dropdown">
										Switch Project <span class="caret"></span>
									</button>
									<ul class="dropdown-menu text-left">
										<li><a href="#">Project</a></li>
										<li><a href="#">Another Project</a></li>
										<li><a href="#">More Projects</a></li>
									</ul>
								</div>
							</div>
						</header>
						<section class="w-f scrollable">
							<div class="slim-scroll" data-height="auto"
								data-disable-fade-out="true" data-distance="0" data-size="5px"
								data-color="#333333">
									<!-- nav -->
										<!-- nav -->
								<nav class="nav-primary hidden-xs">
									<ul class="nav">
										<li class="active"><a href="index.jsp" class="active">
												<i class="fa fa-dashboard icon"> <b class="bg-danger"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Workset</span>
										</a>
											<ul class="nav lt">
												<li class="active"><a href="index.jsp" class="active">
														<i class="fa fa-angle-right"></i> <span>Dashboard
															v1</span>
												</a></li>
												<li><a href="dashboard.html"> <i
														class="fa fa-angle-right"></i> <span>Dashboard v2</span>
												</a></li>
											</ul></li>
										<li><a href="#layout"> <i
												class="fa fa-columns icon"> <b class="bg-warning"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Layouts</span>
										</a>
											<ul class="nav lt">
												<li><a href="layout-c.html"> <i
														class="fa fa-angle-right"></i> <span>Color option</span>
												</a></li>
												<li><a href="layout-r.html"> <i
														class="fa fa-angle-right"></i> <span>Right nav</span>
												</a></li>
												<li><a href="layout-h.html"> <i
														class="fa fa-angle-right"></i> <span>Hbox Layout</span>
												</a></li>
												<li><a href="layout-boxed.html"> <i
														class="fa fa-angle-right"></i> <span>Boxed Layout</span>
												</a></li>
												<li><a href="layout-fluid.html"> <i
														class="fa fa-angle-right"></i> <span>Fluid Layout</span>
												</a></li>
											</ul></li>
										<li><a href="#uikit"> <i class="fa fa-flask icon">
													<b class="bg-success"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>UI kit</span>
										</a>
											<ul class="nav lt">
												<li><a href="buttons.html"> <i
														class="fa fa-angle-right"></i> <span>Buttons</span>
												</a></li>
												<li><a href="icons.html"> <b
														class="badge bg-info pull-right">369</b> <i
														class="fa fa-angle-right"></i> <span>Icons</span>
												</a></li>
												<li><a href="grid.html"> <i
														class="fa fa-angle-right"></i> <span>Grid</span>
												</a></li>
												<li><a href="widgets.html"> <b
														class="badge pull-right">8</b> <i
														class="fa fa-angle-right"></i> <span>Widgets</span>
												</a></li>
												<li><a href="components.html"> <i
														class="fa fa-angle-right"></i> <span>Components</span>
												</a></li>
												<li><a href="list.html"> <i
														class="fa fa-angle-right"></i> <span>List group</span>
												</a></li>
												<li><a href="#table"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Table</span>
												</a>
													<ul class="nav bg">
														<li><a href="table-static.html"> <i
																class="fa fa-angle-right"></i> <span>Table static</span>
														</a></li>
														<li><a href="table-datatable.html"> <i
																class="fa fa-angle-right"></i> <span>Datatable</span>
														</a></li>
														<li><a href="table-datagrid.html"> <i
																class="fa fa-angle-right"></i> <span>Datagrid</span>
														</a></li>
													</ul></li>
												<li><a href="#form"> <i
														class="fa fa-angle-down text"></i> <i
														class="fa fa-angle-up text-active"></i> <span>Form</span>
												</a>
													<ul class="nav bg">
														<li><a href="form-elements.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	elements</span>
														</a></li>
														<li><a href="form-validation.html"> <i
																class="fa fa-angle-right"></i> <span>Form
																	validation</span>
														</a></li>
														<li><a href="form-wizard.html"> <i
																class="fa fa-angle-right"></i> <span>Form wizard</span>
														</a></li>
													</ul></li>
												<li><a href=""> <i
														class="fa fa-angle-right"></i> <span>Chart</span>
												</a></li>
												<li><a href="fullcalendar.html"> <i
														class="fa fa-angle-right"></i> <span>Fullcalendar</span>
												</a></li>
												<li><a href="portlet.html"> <i
														class="fa fa-angle-right"></i> <span>Portlet</span>
												</a></li>
												<li><a href="timeline.html"> <i
														class="fa fa-angle-right"></i> <span>Timeline</span>
												</a></li>
											</ul></li>
										<li><a href="#pages"> <i
												class="fa fa-file-text icon"> <b class="bg-primary"></b>
											</i> <span class="pull-right"> <i
													class="fa fa-angle-down text"></i> <i
													class="fa fa-angle-up text-active"></i>
											</span> <span>Pages</span>
										</a>
											<ul class="nav lt">
												<li><a href="gallery.html"> <i
														class="fa fa-angle-right"></i> <span>Gallery</span>
												</a></li>
												<li><a href="profile.html"> <i
														class="fa fa-angle-right"></i> <span>Profile</span>
												</a></li>
												<li><a href="invoice.html"> <i
														class="fa fa-angle-right"></i> <span>Invoice</span>
												</a></li>
												<li><a href="intro.html"> <i
														class="fa fa-angle-right"></i> <span>Intro</span>
												</a></li>
												<li><a href="master.html"> <i
														class="fa fa-angle-right"></i> <span>Master</span>
												</a></li>
												<li><a href="gmap.html"> <i
														class="fa fa-angle-right"></i> <span>Google Map</span>
												</a></li>
												<li><a href="jvectormap.html"> <i
														class="fa fa-angle-right"></i> <span>Vector Map</span>
												</a></li>
												<li><a href="login.jsp"> <i
														class="fa fa-angle-right"></i> <span>Signin</span>
												</a></li>
												<li><a href="signup.html"> <i
														class="fa fa-angle-right"></i> <span>Signup</span>
												</a></li>
												<li><a href="404.html"> <i
														class="fa fa-angle-right"></i> <span>404</span>
												</a></li>
											</ul></li>
										<li><a href="mail.html"> <b
												class="badge bg-danger pull-right">3</b> <i
												class="fa fa-envelope-o icon"> <b
													class="bg-primary dker"></b>
											</i> <span>Message</span>
										</a></li>
										<li><a href="notebook.html"> <i
												class="fa fa-pencil icon"> <b class="bg-info"></b>
											</i> <span>Notes</span>
										</a></li>
									</ul>
								</nav>
									<!-- / nav -->
								</div>
						</section>
						<footer class="footer lt hidden-xs b-t b-light">
							<div id="chat" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">Active
											chats</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No active chats.</p>
											<p>
												<a href="#" class="btn btn-sm btn-default">Start
													a chat</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<div id="invite" class="dropup">
								<section class="dropdown-menu on aside-md m-l-n">
									<section class="panel bg-white">
										<header class="panel-heading b-b b-light">
											John <i class="fa fa-circle text-success"></i>
										</header>
										<div class="panel-body animated fadeInRight">
											<p class="text-sm">No contacts in your lists.</p>
											<p>
												<a href="#" class="btn btn-sm btn-facebook"><i
													class="fa fa-fw fa-facebook"></i> Invite from Facebook</a>
											</p>
										</div>
									</section>
								</section>
							</div>
							<a href="#nav" data-toggle="class:nav-xs"
								class="pull-right btn btn-sm btn-default btn-icon"> <i
								class="fa fa-angle-left text"></i> <i
								class="fa fa-angle-right text-active"></i>
							</a>
							<div class="btn-group hidden-nav-xs">
								<button type="button" title="Chats"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#chat">
									<i class="fa fa-comment-o"></i>
								</button>
								<button type="button" title="Contacts"
									class="btn btn-icon btn-sm btn-default" data-toggle="dropdown"
									data-target="#invite">
									<i class="fa fa-facebook"></i>
								</button>
							</div>
						</footer>
					</section>
				</aside>
				<!-- /.aside -->
				<section id="content">
					<section class="vbox">
						<section class="scrollable padder">
							<ul class="breadcrumb no-border no-radius b-b b-light pull-in">
								<li><a href="index.jsp"><i class="fa fa-home"></i>
										Home</a></li>
								<li><a href="#">UI kit</a></li>
								<li class="active">Chart</li>
							</ul>
							<div class="m-b-md">
								<div class="row">
									<div class="col-sm-6">
										<h3 class="m-b-none m-t-sm">Charts</h3>
										<small>Statistics &amp; graph information</small>
									</div>
									<div class="col-sm-6">
										<div class="text-right text-left-xs">
											<div class="sparkline m-l m-r-lg pull-right" data-type="bar"
												data-height="35" data-bar-width="6" data-bar-spacing="2"
												data-bar-color="#fb6b5b">
												<canvas width="86" height="35"
													style="display: inline-block; width: 86px; height: 35px; vertical-align: top;"></canvas>
											</div>
											<div class="m-t-sm">
												<span class="text-uc">New users</span>
												<div class="h4">
													<strong>1,120,100</strong>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<section class="panel panel-default">
								<header class="panel-heading font-bold">Site statistics</header>
								<div class="panel-body">
									<div id="flot-1ine"
										style="height: 250px; padding: 0px; position: relative;">
										<canvas class="flot-base"
											style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1036px; height: 250px;"
											width="1036" height="250"></canvas>
										<div class="flot-text"
											style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
											<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
												style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 17px; text-align: center;">0</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 108px; text-align: center;">1</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 199px; text-align: center;">2</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 290px; text-align: center;">3</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 382px; text-align: center;">4</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 473px; text-align: center;">5</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 564px; text-align: center;">6</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 655px; text-align: center;">7</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 747px; text-align: center;">8</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 838px; text-align: center;">9</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 926px; text-align: center;">10</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; max-width: 86px; top: 232px; left: 1017px; text-align: center;">11</div>
											</div>
											<div class="flot-y-axis flot-y1-axis yAxis y1Axis"
												style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 219px; left: 8px; text-align: right;">0</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 176px; left: 8px; text-align: right;">5</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 133px; left: 1px; text-align: right;">10</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 90px; left: 1px; text-align: right;">15</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 47px; left: 1px; text-align: right;">20</div>
												<div class="flot-tick-label tickLabel"
													style="position: absolute; top: 4px; left: 1px; text-align: right;">25</div>
											</div>
										</div>
										<canvas class="flot-overlay"
											style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1036px; height: 250px;"
											width="1036" height="250"></canvas>
									</div>
								</div>
								<footer class="panel-footer bg-white">
									<div class="row text-center no-gutter">
										<div class="col-xs-3 b-r b-light">
											<p class="h3 font-bold m-t">5,860</p>
											<p class="text-muted">Orders</p>
										</div>
										<div class="col-xs-3 b-r b-light">
											<p class="h3 font-bold m-t">10,450</p>
											<p class="text-muted">Sellings</p>
										</div>
										<div class="col-xs-3 b-r b-light">
											<p class="h3 font-bold m-t">21,230</p>
											<p class="text-muted">Items</p>
										</div>
										<div class="col-xs-3">
											<p class="h3 font-bold m-t">7,230</p>
											<p class="text-muted">Customers</p>
										</div>
									</div>
								</footer>
							</section>
							<div class="row">
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Multiple</header>
										<div class="panel-body">
											<div id="flot-chart"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="flot-text"
													style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
													<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 16px; text-align: center;">0</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 92px; text-align: center;">1</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 169px; text-align: center;">2</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 246px; text-align: center;">3</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 322px; text-align: center;">4</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 399px; text-align: center;">5</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 476px; text-align: center;">6</div>
													</div>
													<div class="flot-y-axis flot-y1-axis yAxis y1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 210px; left: 7px; text-align: right;">0</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 195px; left: 7px; text-align: right;">2</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 180px; left: 7px; text-align: right;">4</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 165px; left: 7px; text-align: right;">6</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 150px; left: 7px; text-align: right;">8</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 135px; left: 0px; text-align: right;">10</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 120px; left: 0px; text-align: right;">12</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 105px; left: 0px; text-align: right;">14</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 90px; left: 0px; text-align: right;">16</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 75px; left: 0px; text-align: right;">18</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 60px; left: 0px; text-align: right;">20</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 45px; left: 0px; text-align: right;">22</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 30px; left: 0px; text-align: right;">24</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 15px; left: 0px; text-align: right;">26</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 1px; left: 0px; text-align: right;">28</div>
													</div>
												</div>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="legend">
													<div
														style="position: absolute; width: 86px; height: 34px; top: 14px; right: 13px; background-color: rgb(255, 255, 255); opacity: 0.85;">
													</div>
													<table
														style="position: absolute; top: 14px; right: 13px;; font-size: smaller; color: #545454">
														<tbody>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(221, 221, 221); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Unique Visits</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(137, 203, 78); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Page Views</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</section>
								</div>
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Real-time
											update</header>
										<div class="panel-body">
											<div id="flot-live"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="flot-text"
													style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
													<div class="flot-y-axis flot-y1-axis yAxis y1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 223px; left: 14px; text-align: right;">0</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 178px; left: 7px; text-align: right;">20</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 134px; left: 7px; text-align: right;">40</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 89px; left: 7px; text-align: right;">60</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 45px; left: 7px; text-align: right;">80</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 1px; left: 0px; text-align: right;">100</div>
													</div>
												</div>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
											</div>
										</div>
									</section>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Vertical bar</header>
										<div class="panel-body">
											<div id="flot-bar"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="flot-text"
													style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
													<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 36px; text-align: center;">10</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 89px; text-align: center;">15</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 141px; text-align: center;">20</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 193px; text-align: center;">25</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 246px; text-align: center;">30</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 298px; text-align: center;">35</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 350px; text-align: center;">40</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 402px; text-align: center;">45</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 44px; top: 223px; left: 455px; text-align: center;">50</div>
													</div>
													<div class="flot-y-axis flot-y1-axis yAxis y1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 210px; left: 14px; text-align: right;">0</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 168px; left: 7px; text-align: right;">25</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 126px; left: 7px; text-align: right;">50</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 84px; left: 7px; text-align: right;">75</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 42px; left: 0px; text-align: right;">100</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 1px; left: 0px; text-align: right;">125</div>
													</div>
												</div>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="legend">
													<div
														style="position: absolute; width: 65px; height: 51px; right: 13px; background-color: rgb(255, 255, 255); opacity: 0.85;">
													</div>
													<table
														style="position: absolute; right: 13px;; font-size: smaller; color: #545454">
														<tbody>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #6783b7; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 1</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #4fcdb7; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 2</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #8dd168; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 3</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</section>
								</div>
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Horizontal
											bar</header>
										<div class="panel-body">
											<div id="flot-bar-h"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="flot-text"
													style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
													<div class="flot-x-axis flot-x1-axis xAxis x1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 16px; text-align: center;">0</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 88px; text-align: center;">20</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 164px; text-align: center;">40</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 241px; text-align: center;">60</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 317px; text-align: center;">80</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 389px; text-align: center;">100</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; max-width: 69px; top: 223px; left: 466px; text-align: center;">120</div>
													</div>
													<div class="flot-y-axis flot-y1-axis yAxis y1Axis"
														style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 210px; left: 7px; text-align: right;">5</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 175px; left: 0px; text-align: right;">10</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 140px; left: 0px; text-align: right;">15</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 105px; left: 0px; text-align: right;">20</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 70px; left: 0px; text-align: right;">25</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 35px; left: 0px; text-align: right;">30</div>
														<div class="flot-tick-label tickLabel"
															style="position: absolute; top: 1px; left: 0px; text-align: right;">35</div>
													</div>
												</div>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="legend">
													<div
														style="position: absolute; width: 65px; height: 51px; right: 16px; background-color: rgb(255, 255, 255); opacity: 0.85;">
													</div>
													<table
														style="position: absolute; right: 16px;; font-size: smaller; color: #545454">
														<tbody>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #6783b7; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 1</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #4fcdb7; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 2</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid none; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid #8dd168; overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Product 3</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</section>
								</div>
							</div>
							<div class="row">
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Pie Chart</header>
										<div class="panel-body">
											<div id="flot-pie"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<span class="pieLabel" id="pieLabel0"
													style="position: absolute; top: 4px; left: 254.5px;"><div
														style="font-size: x-small; text-align: center; padding: 2px; color: rgb(153, 199, 206);">
														Series1<br>11%
													</div></span><span class="pieLabel" id="pieLabel1"
													style="position: absolute; top: 134px; left: 317.5px;"><div
														style="font-size: x-small; text-align: center; padding: 2px; color: rgb(153, 153, 153);">
														Series2<br>39%
													</div></span><span class="pieLabel" id="pieLabel2"
													style="position: absolute; top: 182px; left: 157.5px;"><div
														style="font-size: x-small; text-align: center; padding: 2px; color: rgb(187, 187, 187);">
														Series3<br>22%
													</div></span><span class="pieLabel" id="pieLabel3"
													style="position: absolute; top: 120px; left: 119.5px;"><div
														style="font-size: x-small; text-align: center; padding: 2px; color: rgb(221, 221, 221);">
														Series4<br>2%
													</div></span><span class="pieLabel" id="pieLabel4"
													style="position: absolute; top: 33px; left: 142.5px;"><div
														style="font-size: x-small; text-align: center; padding: 2px; color: rgb(240, 240, 240);">
														Series5<br>27%
													</div></span>
											</div>
										</div>
									</section>
								</div>
								<div class="col-md-6">
									<section class="panel panel-default">
										<header class="panel-heading font-bold">Donut pie</header>
										<div class="panel-body">
											<div id="flot-pie-donut"
												style="height: 240px; padding: 0px; position: relative;">
												<canvas class="flot-base"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<canvas class="flot-overlay"
													style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 487px; height: 240px;"
													width="487" height="240"></canvas>
												<div class="legend">
													<div
														style="position: absolute; width: 56px; height: 85px; top: 5px; right: 5px; background-color: rgb(255, 255, 255); opacity: 0.85;">
													</div>
													<table
														style="position: absolute; top: 5px; right: 5px;; font-size: smaller; color: #545454">
														<tbody>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(153, 199, 206); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Series1</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(153, 153, 153); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Series2</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(187, 187, 187); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Series3</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(221, 221, 221); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Series4</td>
															</tr>
															<tr>
																<td class="legendColorBox"><div
																		style="border: 1px solid #ccc; padding: 1px">
																		<div
																			style="width: 4px; height: 0; border: 5px solid rgb(240, 240, 240); overflow: hidden"></div>
																	</div></td>
																<td class="legendLabel">Series5</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</section>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading">Pie</header>
										<div class="panel-body text-center">
											<div class="sparkline inline" data-type="pie"
												data-height="150"
												data-slice-colors="[&#39;#99c7ce&#39;,&#39;#f2f2f2&#39;]">
												<canvas width="150" height="150"
													style="display: inline-block; width: 150px; height: 150px; vertical-align: top;"></canvas>
											</div>
											<div class="line pull-in"></div>
											<div class="text-xs">
												<i class="fa fa-circle text-info"></i> 60% <i
													class="fa fa-circle text-muted"></i> 40%
											</div>
										</div>
									</section>
								</div>
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading">Composite</header>
										<div class="text-center bg-success lt clearfix">
											<div class="m-t-lg clearfix">
												<div class="sparkline padder m-b" data-type="line"
													data-resize="true" data-height="50" data-width="100%"
													data-line-width="2" data-line-color="#fff"
													data-spot-color="#fff" data-fill-color=""
													data-highlight-line-color="#fff" data-spot-radius="3"
													values="220,210,200,325,250,320,345,250,250,250,400,380">
													<canvas
														style="display: inline-block; width: 304px; height: 50px; vertical-align: top;"
														width="304" height="50"></canvas>
												</div>
												<div class="bg padder">
													<div class="sparkline inline m-t" data-type="bar"
														data-height="67" data-bar-width="6" data-bar-spacing="10"
														data-bar-color="#a9d089">
														<canvas width="214" height="67"
															style="display: inline-block; width: 214px; height: 67px; vertical-align: top;"></canvas>
													</div>
												</div>
											</div>
										</div>
										<footer class="panel-footer text-sm">Check more data</footer>
									</section>
								</div>
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading">Stacked</header>
										<div class="panel-body text-center">
											<div class="sparkline inline" data-type="bar"
												data-height="160" data-bar-width="12" data-bar-spacing="10"
												data-stacked-bar-color="[&#39;#afcf6f&#39;, &#39;#eee&#39;]">
												<canvas width="210" height="160"
													style="display: inline-block; width: 210px; height: 160px; vertical-align: top;"></canvas>
											</div>
											<ul class="list-inline text-muted axis">
												<li>1</li>
												<li>2</li>
												<li>3</li>
												<li>4</li>
												<li>5</li>
												<li>6</li>
												<li>7</li>
												<li>8</li>
												<li>9</li>
												<li>10</li>
											</ul>
										</div>
									</section>
								</div>
							</div>
							<div class="row">
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading"> Conversion </header>
										<div class="panel-body text-center">
											<h4>
												62.5<small> hrs</small>
											</h4>
											<small class="text-muted block">Updated at 2 minutes
												ago</small>
											<div class="inline">
												<div class="easypiechart easyPieChart" data-percent="75"
													data-line-width="16" data-loop="false" data-size="188"
													style="width: 188px; height: 188px; line-height: 188px;">
													<span class="h2 step">75</span>%
													<div class="easypie-text">New</div>
													<canvas width="188" height="188"></canvas>
												</div>
											</div>
										</div>
										<div class="panel-footer">
											<small>% of avarage rate of the Conversion</small>
										</div>
									</section>
								</div>
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading"> Bounce rate </header>
										<div class="panel-body text-center">
											<h4>
												<small>last </small>12<small> hrs</small>
											</h4>
											<small class="text-muted block">yesterday: 20%</small>
											<div class="inline">
												<div class="easypiechart easyPieChart" data-percent="25"
													data-line-width="6" data-loop="false" data-size="188"
													style="width: 188px; height: 188px; line-height: 188px;">
													<span class="h2 step">25</span>%
													<div class="easypie-text">Today</div>
													<canvas width="188" height="188"></canvas>
												</div>
											</div>
										</div>
										<div class="panel-footer">
											<small>% of change</small>
										</div>
									</section>
								</div>
								<div class="col-lg-4">
									<section class="panel panel-default">
										<header class="panel-heading"> New visitors </header>
										<div class="panel-body text-center">
											<h4>3,450</h4>
											<small class="text-muted block">Worldwide visitors</small>
											<div class="inline">
												<div class="easypiechart easyPieChart" data-percent="60"
													data-line-width="30" data-track-color="#eee"
													data-bar-color="#afcf6f" data-scale-color="#fff"
													data-size="188" data-line-cap="butt"
													style="width: 188px; height: 188px; line-height: 188px;">
													<span class="h2 step">60</span>%
													<div class="easypie-text">new visits</div>
													<canvas width="188" height="188"></canvas>
												</div>
											</div>
										</div>
										<div class="panel-footer">
											<small>% of avarage rate of the visits</small>
										</div>
									</section>
								</div>
							</div>
						</section>
					</section>
					<a href="#" class="hide nav-off-screen-block"
						data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
				</section>
				<aside class="bg-light lter b-l aside-md hide" id="notes">
					<div class="wrapper">Notification</div>
				</aside>
			</section>
		</section>
	</section>
	<!-- Bootstrap -->
	<!-- App -->
	<script src="./chart_files/app.v1.js"></script>
	<!-- Sparkline Chart -->
	<script src="./chart_files/jquery.sparkline.min.js"></script>
	<!-- Easy Pie Chart -->
	<script src="./chart_files/jquery.easy-pie-chart.js"></script>
	<!-- Flot -->
	<script src="./chart_files/jquery.flot.min.js"></script>
	<script src="./chart_files/jquery.flot.tooltip.min.js"></script>
	<script src="./chart_files/jquery.flot.resize.js"></script>
	<script src="./chart_files/jquery.flot.orderBars.js"></script>
	<script src="./chart_files/jquery.flot.pie.min.js"></script>
	<script src="./chart_files/jquery.flot.grow.js"></script>
	<script src="./chart_files/demo.js"></script>
	<script src="./chart_files/app.plugin.js"></script>
	<div id="flotTip" style="display: none; position: absolute;"></div>
</body>
</html>